Coding Worksheets

Graphic and Web Design Coding Worksheet 1
Github Link Coding Worksheet 1
Github Repository Link Coding Worksheet 1

Graphic and Web Design Coding Worksheet 1 was focused on the basics of HTMl and publishing to Github, with the main focus being on displaying text on a webpage using HTMl, which was very useful in providing me with a base understanding of HTML and the key concepts such as HTML and body tags and how they are used to display content.

Graphic and Web Design Coding Worksheet 2
Github Link Coding Worksheet 2
Github Repository Link Coding Worksheet 2

Graphic and Web Design Coding Worksheet 2 built on the core understanding of HTMl from the first worksheet, with concepts such as heading tags from h1 to h6 as well as lists, incuding ordered lists and unordered lists. It also effectively demonstrated how to include images in a web page using img src tags. It was overall effective in furthering my understanding of the fundamentals of HTML.

Graphic and Web Design Coding Worksheet 3
Github Link Coding Worksheet 3
Github Repository Link Coding Worksheet 3

Graphic and Web Design Coding Worksheet 3 further built on Worksheet 2 introducing the core concepts of CSS and how to use it to effectively style a webpage. It demonstrated how to link a styles.css page to the index.html in order to use the styles created in styles.css such as styled heading tags like h1 with edited font size. It also showed how to link anothe html page inside of index.html through the use of href tags to link a secondary page, cake.html, to text inside the h2 tag.

Graphic and Web Design Coding Worksheet 4
Github Link Coding Worksheet 4
Github Repository Link Coding Worksheet 4

Graphic and Web Design Coding Worksheet 4 introduced the key concepts of flexbox and how to use it to ensure a website flexes to fit the page size, displaying content without breaking. It also introduced alternate navigation links such as anchor links which can be used to create more effective and dynamic navigation, for example linking a button or text to a specific element or section of your website.

Graphic and Web Design Coding Worksheet 5
Github Link Coding Worksheet 5
Github Repository Link Coding Worksheet 5

Graphic and Web Design Coding Worksheet 5 further built upon Worksheet 4, introducing important style elements such as how to import and use Adobe Fonts to include more dynamic and visually pleasing fonts. Similarly more advanced styling such as button hover and active were introduced, demonstrating an effective method to make your website more interactive and dynamic.